<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %><%@
include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>中国车友会</title>
<meta name="keywords" content="中国车友会" />
<meta name="description" content='中国车友会'/>
<meta name="author" content="YangMing_gz DengFeiCui_gz"/>
<link rel="stylesheet" type="text/css" href="http://www1.pcauto.com.cn/zt/gz20141224/wap/createclub/css/step1.css">
</head>
<body>
<!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7474" />
        </jsp:include>
<div class="g-doc">
	<div class="g-hd">
		<script type="text/javascript" src="http://www.pcauto.com.cn/global/wap/1411/intf6047.html"></script>
		<div class="m-nav">
			<a href="${WAPROOT}/" class="u-hd-prev" ></a>
			<div class="u-hd-mark">
				创建车友会
			</div>
			<a href="${WAPROOT}/club/createClubQuestionPage.do" class="u-hd-sub-mark">
				常见问题
			</a>
		</div>
	</div>
	<div class="g-bd">
		<c:choose>
			<c:when test="${!empty joinedClubTips }">
				<div class="m-tips">
					<p>${joinedClubTips }</p>
					<p>
						<a href="http://m.pcauto.com.cn/club/">返回车友会首页</a>
					</p>
				</div>
			</c:when>
			<c:otherwise>
				<div class="m-step">
					<img src="http://www1.pcauto.com.cn/zt/gz20141224/wap/createclub/imgs/m-step-1.png" alt="" />
				</div>
				<form id="applyForm" method="post" action="${WAPROOT}/club/createClubStep1Action.do" >
				<div class="m-form">
					<ul>
						<li>
							<i class="u-name">
							名称：
							</i>
							<i class="u-ipt">
								<input type="text" class="ipt" value="${clubDraft.name }" placeholder="15个汉字以内" id="name" name="name"/>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li class="li-domain">
							<i class="u-name">
							域名：
							</i>
							<i class="u-ipt">
							    <i class="u-addr">club.pcauto.com.cn/</i>
								<input type="text" class="ipt" value="${clubDraft.clubUrl }" placeholder="请输入后缀" id="clubUrl" name="clubUrl"/>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li>
							<i class="u-name">
							类型：
							</i>
							<i class="u-sel">
								<select id="clubType" name="clubType" onchange="initByType();" class="selected">
							        <option value="${TYPE_SERIAL }" ${clubDraft.typeId==TYPE_SERIAL?'selected':''}>品牌/车系车友会</option>
		                            <option value="${TYPE_AREA }" ${clubDraft.typeId==TYPE_AREA?'selected':''}>地区车友会</option>
		                            <option value="${TYPE_THEME }" ${clubDraft.typeId==TYPE_THEME?'selected':''}>主题车友会</option>
								</select>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li id="li_theme">
							<i class="u-name">
							主题：
							</i>
							<i class="u-sel">
								<select id="themeId" name="themeId" class="selected">
									<option value="">请选择主题</option>
									<c:forEach var="t" items="${themes}">
										<c:if test="${clubDraft.themeId == t.themeId}">
											<option value="${t.themeId}" selected="selected">${t.themeName}</option>
										</c:if>
										<c:if test="${clubDraft.themeId != t.themeId}">
											<option value="${t.themeId}">${t.themeName}</option>
										</c:if>
		                            	
		                            </c:forEach>
								</select>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li id="li_brand">
							<i class="u-name">
							品牌：
							</i>
							<i class="u-sel">
								<select id="brandId" name="brandId" class="selected">
									<option value="">请选择品牌</option>
								</select>
							</i>
							<i class="u-icon">*</i>
							<input type="hidden" id="brandName" name="brandName" value="${clubDraft.brandName }"/>
						</li>
						<li id="li_series">
							<i class="u-name">
							车系：
							</i>
							<i class="u-sel">
								<select id="seriesId" name="seriesId" disabled="disabled">
									<option value="" selected="selected">请选择车系</option>
								</select>
							</i>
							<i class="u-icon">*</i>
							<input type="hidden" id="seriesName" name="seriesName" value="${clubDraft.seriesName }"/>
						</li>
						<li>
							<i class="u-name">
							省份：
							</i>
							<i class="u-sel">
								<select id="areaParentTag_cityId" name="areaParentTag_provinceId" class="selected">
									<option value="" selected="selected">请选择省份</option>
								</select>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li>
							<i class="u-name">
							城市：
							</i>
							<i class="u-sel">
								<select id="cityId" name="cityId" disabled="disabled">
									<option value="" selected="selected">请选择城市</option>
								</select>
								<input type="hidden" id="provinceName" name="provinceName" value=""/>
		                        <input type="hidden" id="provinceId" name="provinceId" value=""/>
		                        <input type="hidden" id="cityName" name="cityName" value=""/>
							</i>
							<i class="u-icon">*</i>
						</li>
						<li>
							<i class="u-name">
							qq群：
							</i>
							<i class="u-ipt">
								<input type="text" class="ipt"  placeholder="填写此项可加快审核速度" id="qqGroup_temp" value="${clubDraft.qqGroup }"/>
								<input type="hidden" name="qqGroup" id="qqGroup" />
							</i>
						</li>
					</ul>
					<input type="button" class="u-btn-next-step" value="下一步" id="next-step"/>
				</div>
				</form>
			</c:otherwise>
		</c:choose>
	</div>
	<div class="g-ft">
		<script src="http://www.pcauto.com.cn/3g/wap2013/intf/1303/intf1567.js" type="text/javascript" charset="utf-8"></script>
	</div>
</div>

<script type="text/javascript" src="${UCROOT}/js/jquery.js"></script>
<script type="text/javascript">

jQuery.getScript("${ROOT}/js/brand_series.js",function(){
    //车系
    relatedSelect(
    {id:"brandId",url:"http://price.pcauto.com.cn/interface/5_3/brand_json_chooser_v2.jsp",node:{root:"brands", value:"id", text:"text",custom:"id"},load:true},
    {id:"seriesId",url:"http://price.pcauto.com.cn/interface/5_3/serial_json_chooser.jsp?brand=",node:{root:"firms", value:"id", text:"text",custom:"id"}});
    $("#brandId").change(function(){
        var selectText = $(this).find("option:selected").text();
        $("#brandName").val(selectText); 
        //选完品牌要清车系
        $("#seriesName").val("");
    	if($(this).val()!=""){
            $('#seriesId').removeAttr('disabled').addClass("selected");
        }
        else{
            $('#seriesId').attr('disabled','true').removeClass("selected");
        } 
    });
    $("#seriesId").change(function(){
        var selectText = $(this).find("option:selected").text();
        if(selectText !=""){
            $("#seriesName").val(selectText); 
        }
    });
    
    //省份城市取值
    $.getScript("${UCROOT}/intf/area.jsp?tag=cityId&selected=${clubDraft.cityId}");
    $("#areaParentTag_cityId").change(function(){
        //清除文本提示
    	if($(this).val()!=""){
            $('#cityId').removeAttr('disabled').addClass("selected");;
        }
        else{
            $('#cityId').attr('disabled','true').removeClass("selected");
        }    
    });
});

//读取草稿保存品牌，车系
setTimeout(function initBrandSeriesId() {
	$("#brandId option[value='${clubDraft.brandId}']").attr("selected", true);
	var seriesId = ${clubDraft.seriesId};
	if(seriesId != 0){
	  $("#seriesId").append('<option value="${clubDraft.seriesId}" selected="selected">${clubDraft.seriesName}</option>');
	}
}, 1000);



//根据不同的类型，显示相应的内容
function initByType() {
	var type = $("#clubType").val();
	if(type == "${TYPE_AREA}"){//地区车友会，隐藏主题，品牌，车系项
		$("#li_theme").hide();
		$("#li_brand").hide();
		$("#li_series").hide();
		$("#areaParentTag_cityId").parent().next().text("*");//加上省份必选“*”标志
		$("#cityId").parent().next().text("*");//加上城市必选“*”标志
	} else if(type == "${TYPE_SERIAL}") {//品牌车友会，隐藏主题项
		$("#li_theme").hide();
		$("#li_brand").show();
		$("#li_series").show();
		$("#areaParentTag_cityId").parent().next().text("");//去掉省份必选“*”标志
		$("#cityId").parent().next().text("");//去掉城市必选“*”标志
		$("#brandId").parent().next().text("*");//加上省份必选“*”标志
		$("#seriesName").prev().text("*");//加上城市必选“*”标志
	 	if(!$("#seriesName").val()){
		   $("#seriesId").html('<option value="" selected="selected">请选择车系</option>');
		} 
	} else if(type == "${TYPE_THEME}"){//主题车友会，显示全部
		$("#li_theme").show();
		$("#li_brand").show();
		$("#li_series").show();
		$("#areaParentTag_cityId").parent().next().text("");//去掉省份必选“*”标志
		$("#cityId").parent().next().text("");//去掉城市必选“*”标志
		$("#brandId").parent().next().text("");//去掉品牌必选“*”标志
		$("#seriesName").prev().text("");//去掉车系必选“*”标志

	}
}

initByType();

//提交前设置省份,城市
function setProvinceCityId(){
    var $provinceOption = $("#areaParentTag_cityId").find("option:selected");
    if($provinceOption.length>0 && $provinceOption.val()){
        $("#provinceId").val($provinceOption.val());
        $("#provinceName").val($provinceOption.text());
    }else{
        $("#provinceId").val(0);
        $("#provinceName").val("");
    }
    
    var $cityOption = $("#cityId").find("option:selected");
    if($cityOption.length>0 && $cityOption.val()){
        $("#cityId").val($cityOption.val());
        $("#cityName").val($cityOption.text());
    }else{
        $("#cityId").val(0);
        $("#cityName").val("");
    }
}

//提交前设置品牌，车系
function setBrandSeriesId(){
    var $brandIdOption = $("#brandId").find("option:selected");
    if($brandIdOption.length>0 && $brandIdOption.val()){
        $("#brandId").val($brandIdOption.val());
        $("#brandName").val($brandIdOption.text());
    }else{
        $("#brandIdId").val(0);
        $("#brandName").val("");
    }
    var $seriesOption = $("#seriesId").find("option:selected");
    if($seriesOption.length>0 && $seriesOption.val()){
        $("#seriesId").val($seriesOption.val());
        $("#seriesName").val($seriesOption.text());
    }else{
        $("#seriesId").val(0);
        $("#seriesName").val("");
    }
}

/******自定义封装 begin ******/
var packFn={
	getId: function(id) {
		return document.getElementById(id);
	},
	getElem: function(elem) {
		return document.querySelector(elem);
	},
	show: function(obj) {
		obj.style.display = "block";
	},
	hide: function(obj) {
		obj.style.display = "none";
	},
	touchEvent:function(elm,fn) {
		if ("ontouchstart" in document.documentElement) {
			elm.addEventListener("touchstart",fn,false);
		}else {
			elm.addEventListener("click",fn,false);
		}
	}
}
/******自定义封装 end ******/

/******提示信息 begin ******/
//显示提示信息
function showTopTip(msg) {
	var tipEle = document.getElementById("JtopTipMsg");
	if (!tipEle) {
		tipEle = document.createElement("div");
		tipEle.id = "JtopTipMsg";
		tipEle.style.cssText = "display:none;width:190px;padding:10px;line-height:30px;font-size:16px;background-color:rgba(000,000,000,0.5);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#fff;text-align:center;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;position:fixed;top:50%;left:50%;margin-left:-95px;margin-top:-25px;opacity:1;z-index:999;";
		document.body.appendChild(tipEle);
	}
	tipEle.innerHTML = msg;
	tipEle.style.display = "block";
	setTimeout(function() {
		tipEle.style.opacity = "1";
	}, 0);
}
//隐藏提示信息
function hideTopTip() {
	var tipEle = document.getElementById("JtopTipMsg");
	if (tipEle) {
		setTimeout(function() {
			tipEle.style.opacity = "0";
			setTimeout(function() {
				tipEle.style.display = "none";
			}, 300);
		}, 1500);
	}
}

function getTip(tip_txt){
	showTopTip(tip_txt);
	hideTopTip();
}
/******提示信息 end ******/

/******验证 begin ******/
var nextStep=packFn.getId('next-step'),
	 uName=packFn.getId('name'),
	 domain=packFn.getId('clubUrl'),
	 type=packFn.getId('clubType'),
	 theme=packFn.getId('themeId'),
	 brand=packFn.getId('brandId'),
	 series=packFn.getId('seriesId'),
	 pro=packFn.getId('provinceId'),
	 city=packFn.getId('cityId');

var redBorder = "border-red";
nextStep.addEventListener('click',function(){
	setProvinceCityId();
	setBrandSeriesId();
	var qqGroup = $("#qqGroup_temp").val();
	$("#qqGroup").val(qqGroup);
	
	//地区车友会必填写字段
	if(uName.value==''){
		getTip('请填写名称');
		$("#name").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#name").parent().parent().attr("class")){
			$("#name").parent().parent().removeAttr("class");
		}
	}
	$("#cityId").attr("disabled","");
	if(domain.value==''){
		getTip('请填写域名');
		$("#clubUrl").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#clubUrl").parent().parent().hasClass(redBorder)){
			$("#clubUrl").parent().parent().removeClass(redBorder);
		}
	}
	
	if(type.value==''){
		getTip('请选择类型');
		$("#clubType").parent().parent().addClass(redBorder);
		return false;
	}else{
		if($("#clubType").parent().parent().attr("class")){
			$("#clubType").parent().parent().removeAttr("class");
		}
	}
	//品牌车友会必填字段
	if(type.value == "${TYPE_SERIAL}") {
		if(brand.value==''){
			getTip('请选择品牌');
			$("#brandId").parent().parent().addClass(redBorder);
			return false;
		}else{
			if($("#brandId").parent().parent().attr("class")){
				$("#brandId").parent().parent().removeAttr("class");
			}
		}
		$("#seriesId").removeAttr("disabled");
		if(series.value==''){
			getTip('请选择车系');
			$("#seriesId").parent().parent().addClass(redBorder);
			return false;
		}else{
			if($("#seriesId").parent().parent().attr("class")){
				$("#seriesId").parent().parent().removeAttr("class");
			}
		}
	} 

	//地区车友会必填字段
	if(type.value == "${TYPE_AREA}") {
		if(pro.value==0){
			getTip('请选择省份');
			$("#areaParentTag_cityId").parent().parent().addClass(redBorder);
			return false;
		}else{
			if($("#areaParentTag_cityId").parent().parent().attr("class")){
				$("#areaParentTag_cityId").parent().parent().removeAttr("class");
			}
		}
		
		if(city.value==''){
			getTip('请选择城市');
			$("#cityId").parent().parent().addClass(redBorder);
			return false;
		}else{
			if($("#cityId").parent().parent().attr("class")){
				$("#cityId").parent().parent().removeAttr("class");
			}
		}
		
	} 
    
	//主题车友会必填字段
	if(type.value == "${TYPE_THEME}") {
		if(theme.value==''){
			getTip('请选择主题');
			$("#themeId").parent().parent().addClass(redBorder);
			return false;
		}
	}else{
		if($("#themeId").parent().parent().attr("class")){
			$("#themeId").parent().parent().removeAttr("class");
		}
	}
	
	//验证通过，保存草稿
	$.ajax({
        url:$("#applyForm").attr("action"),
        data:$("#applyForm").serialize(), 
        dataType:"json",
        type:"post",
        success:function(rs,textStatus){
            if(rs.statusCode==-1){
            	var field = rs.field;
            	$("li[class=border-red]").removeClass(redBorder);
            	if(field == "name"){
            		$("#name").parent().parent().addClass(redBorder);
            	}else if(field == "clubUrl"){
            		$("#clubUrl").parent().parent().addClass(redBorder);
            	}else if(field == "themeId"){
            		$("#themeId").parent().parent().addClass(redBorder);
            	}else if(field == "clubType"){
            		$("#clubType").parent().parent().addClass(redBorder);
            	}else if(field == "brandId"){
            		$("#brandId").parent().parent().addClass(redBorder);
            	}else if(field == "seriesId"){
            		$("#seriesId").parent().parent().addClass(redBorder);
            	}else if(field == "areaParentTag_cityId"){
            		$("#areaParentTag_cityId").parent().parent().addClass(redBorder);
            	}else if(field == "cityId"){
            		$("#cityId").parent().parent().addClass(redBorder);
            	}else if(field == "qqGroup"){
            		$("#qqGroup_temp").parent().parent().addClass(redBorder);
            	}

            	getTip(rs.message);
            }else{
                window.location.href="${WAPROOT}/club/createClubStep2Page.do";
            }                    
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
        	getTip("保存草稿失败");
        }
    });

},false);

/******验证 end ******/

/******分享 begin ******/
var WXShare = function(title,desc,img,width,height,url,appid){
	//初始化参数
	img=img||'';
	width=width||100;
	height=height||100;
	title=title||document.title;
	desc=desc||document.title;
	url=url||document.location.href;
	appid=appid||'';
	//微信内置方法
	function _ShareFriend() {
		WeixinJSBridge.invoke('sendAppMessage',{
			'appid': appid,
			'img_url': img,
			'img_width': width,
			'img_height': height,
			'link': url,
			'desc': desc,
			'title': title
		}, function(res){
			_report('send_msg', res.err_msg);
		})
	}
	function _ShareTL() {
		WeixinJSBridge.invoke('shareTimeline',{
			'img_url': img,
			'img_width': width,
			'img_height': height,
			'link': url,
			'desc': desc,
			'title': title
		}, function(res) {
			_report('timeline', res.err_msg);
		});
	}
	function _ShareWB() {
		WeixinJSBridge.invoke('shareWeibo',{
			'content': desc,
			'url': url,
		}, function(res) {
			_report('weibo', res.err_msg);
		});
	}
	document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
		WeixinJSBridge.on('menu:share:appmessage', function(argv){
			_ShareFriend();
		});
		// 分享到朋友圈
		WeixinJSBridge.on('menu:share:timeline', function(argv){
			_ShareTL();
		});
		// 分享到微博
		WeixinJSBridge.on('menu:share:weibo', function(argv){
			_ShareWB();
		});
	}, false);
}

/*
var shareTitle = '',
shareDesc = '',
shareImg = '';

WXShare(shareTitle,shareDesc,shareImg);
*/

/******分享 end ******/

</script>
</body>
</html>
